<template>
    <div>
        <div>
            <el-row>
                <el-button type="primary" @click="addClick()" round>新增宠主</el-button>
            </el-row>
        </div>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="posList" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="宠主昵称" value="petName"></el-option>
                    <el-option label="账号" value="userName"></el-option>
                </el-select>
                <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table :data="tableData" border max-height="800" style="width: 100%">
            <el-table-column prop="headImg" label="头像" width="80">
                <template slot-scope="scope">
                    <el-image :src="scope.row.headImg" :preview-src-list="[scope.row.headImg]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="账号" width="120"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="petName" label="昵称" width="120"></el-table-column>
            <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
            <el-table-column prop="vipCard" label="会员卡" width="120"></el-table-column>
            <el-table-column prop="city" label="送货地址" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" width="300"></el-table-column>
            <el-table-column prop="points" label="积分" width="120"></el-table-column>
            <el-table-column prop="havePet" label="拥有的宠物" width="120"></el-table-column>
            <el-table-column fixed="right" label="操作" width="90">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button
                        @click="handleDelete(scope.$index, scope.row)"
                        type="text"
                        size="small"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改 -->
        <div>
            <template>
                <el-dialog title="修改" :visible="dialogFormVisible">
                    <div slot="header" class="clearfix">
                        <span>编辑信息</span>
                    </div>
                    <div class="text item">
                        <el-form ref="ruleForm" class="demo-ruleForm">
                            <el-form-item label="姓名" prop="name">
                                <el-input
                                    v-model="ruleForm.name"
                                    autocomplete="off"
                                    placeholder="请输入姓名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="昵称" prop="petName">
                                <el-input
                                    v-model="ruleForm.petName"
                                    autocomplete="off"
                                    placeholder="请输入昵称"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="宠物" prop="havePet">
                                <el-input
                                    v-model="ruleForm.havePet"
                                    autocomplete="off"
                                    placeholder="请输入宠物"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" prop="phone">
                                <el-input
                                    v-model="ruleForm.phone"
                                    autocomplete="off"
                                    placeholder="请输入电话号码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="账号" prop="userName">
                                <el-input
                                    v-model="ruleForm.userName"
                                    autocomplete="off"
                                    placeholder="请输入账号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="地区" prop="address">
                                <el-input
                                    v-model="ruleForm.address"
                                    autocomplete="off"
                                    placeholder="请输入地区"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="会员卡" prop="vipCard">
                                <el-input
                                    v-model="ruleForm.vipCard"
                                    autocomplete="off"
                                    placeholder="请输入会员卡"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="积分" prop="points">
                                <el-input
                                    v-model="ruleForm.points"
                                    autocomplete="off"
                                    placeholder="请输入积分"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
        <!-- 新增 -->
        <div>
            <template>
                <el-dialog title="新增" :visible="addFormVisible">
                    <div slot="header" class="clearfix">
                        <span>编辑信息</span>
                    </div>
                    <div class="text item">
                        <el-form ref="ruleForm" class="demo-ruleForm">
                            <el-form-item label="姓名" prop="name">
                                <el-input
                                    v-model="addForm.name"
                                    autocomplete="off"
                                    placeholder="请输入姓名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="昵称" prop="petName">
                                <el-input
                                    v-model="addForm.petName"
                                    autocomplete="off"
                                    placeholder="请输入昵称"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="宠物" prop="havePet">
                                <el-input
                                    v-model="addForm.havePet"
                                    autocomplete="off"
                                    placeholder="请输入宠物"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" prop="phone">
                                <el-input
                                    v-model="addForm.phone"
                                    autocomplete="off"
                                    placeholder="请输入电话号码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="账号" prop="userName">
                                <el-input
                                    v-model="addForm.userName"
                                    autocomplete="off"
                                    placeholder="请输入账号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="地区" prop="address">
                                <el-input
                                    v-model="addForm.address"
                                    autocomplete="off"
                                    placeholder="请输入地区"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="会员卡" prop="vipCard">
                                <el-input
                                    v-model="addForm.vipCard"
                                    autocomplete="off"
                                    placeholder="请输入会员卡"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="积分" prop="points">
                                <el-input
                                    v-model="addForm.points"
                                    autocomplete="off"
                                    placeholder="请输入积分"
                                ></el-input>
                            </el-form-item>
                            <el-upload
                                class="upload-demo"
                                action="api/users/upload"
                                :on-success="smaImgSuccess"
                                :on-remove="smaImgRemove"
                                list-type="picture"
                            >
                                <el-button size="small" type="primary">上传头像</el-button>
                            </el-upload>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addCancel">取 消</el-button>
                        <el-button type="primary" @click="addConfirm">确 定</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>
    </div>
    </div>
</template>

<script>
let _ = require('lodash');
import { getUsers, updateUsers, deleteUsers, addUser, searchUer } from '../../../service/userService.js';
export default {
    methods: {
        handleClick(row) {
            console.log(row);
            this.ruleForm = row;
            this.dialogFormVisible = true;
        },
        async handleDelete(index, row) {
            console.log(index, row._id);
            await this.delete(row._id);
            this.show();
        },
        addClick() {
            this.addFormVisible = true;
        },
        async search(newData) {
            let res = await searchUer(newData);
            this.tableData = res;
        },
        handleSearch() {
            let data = {
                petName: '',
                userName: ''
            };
            let newData = {};
            console.log(this.posList, this.select);
            for (let key in data) {
                if (key == this.select) {
                    newData[key] = this.posList;
                }
            }
            console.log(newData);

            this.search(newData);
        },
        cancel() {
            console.log('取消');
            this.show();
            this.dialogFormVisible = false;
        },
        addCancel() {
            console.log('取消');
            this.show();
            this.addFormVisible = false;
        },
        async confirm(val) {
            await this.update(this.ruleForm);
            this.show();
            this.dialogFormVisible = false;
        },
        async addConfirm() {
            console.log(this.addForm);
            await this.add(this.addForm);
            this.show();
            this.addFormVisible = false;
        },
        smaImgRemove(file, fileList) {
            //文件列表移除文件时的钩子
            _.pull(this.addForm.headImg, file.response.url);
        },
        smaImgSuccess(response, file, fileList) {
            //上传成功时
            const url = `http://localhost:3000`;
            this.addForm.headImg = url + response.url;
            console.log(this.addForm.headImg);
        },
        add: async data => {
            let res = await addUser(data);
        },
        update: async data => {
            let res = await updateUsers(data);
        },
        delete: async _id => {
            let res = await deleteUsers(_id);
        },
        show: async function() {
            let data = await getUsers();
            console.log(data);
            this.tableData = data; //将ajax返回来的值保存
        }
    },
    created() {
        //生命周期方法  当初始化项目则调用渲染方法
        this.show();
    },
    data() {
        return {
            posList: '',
            select: '',
            dialogFormVisible: false,
            addFormVisible: false,
            ruleForm: {},
            addForm: {
                userName: '',
                userPassword: '',
                phone: '',
                petName: '',
                vipCard: [],
                headImg: [],
                address: [],
                address: '',
                points: '',
                havePet: []
            },
            tableData: []
        };
    }
};
</script>

<style>
.avatar {
    width: 60px;
    height: 60px;
    display: block;
}
</style>